<template>
	<view class="wp">
		<!-- <view class="s_input s_tip">现有2000套</view> -->
		<!-- <view class="s_input">
			<label for="">运营中心ID：</label>
			<input type="number" v-model="pmid" placeholder="请输入运营中心ID">
		</view> -->
		<view class="s_input" style="margin-top: 20rpx;">
			<label for="">会员ID：</label>
			<input type="number" v-model="mid" placeholder="请输入会员ID">
			<view class="s_query" @click="queryMember">查询</view>
		</view>
		<view class="query_result" v-show="member.pmember.nickname">
			<view class="q_tit">查询结果如下</view>
			<view class="q_content">
				<image :src="member.pmember.avatar"></image>
				<view class="q_info">
					<view>姓名：{{member.pmember.nickname}}</view>
					<view>电话：{{member.pmember.mobile}}</view>
					<view>现有店铺：{{member.pmember.supnum||0}}</view>
					<!-- <view>现有团长：{{member.pmember.rfernum||0}}</view> -->
				</view>
			</view>
			<view class="q_content" style="margin-top: 20rpx;">
				<image :src="member.member.avatar"></image>
				<view class="q_info">
					<view>姓名：{{member.member.nickname}}</view>
					<view>电话：{{member.member.mobile}}</view>
					<view>现有店铺：{{member.member.supnum||0}}</view>
					<!-- <view>现有团长：{{member.member.rfernum||0}}</view> -->
				</view>
			</view>
		</view>
		<view class="s_input" style="margin: 20rpx 0;" v-show="member.pmember.nickname">
			<label for="">划拨店铺：</label>
			<input type="number" v-model="supnum" @input="changeInput" placeholder="请输入数量">
		</view>
		<!-- <view class="s_input" style="margin-top: 20rpx;" v-show="member.pmember.nickname">
			<label for="">划拨团长：</label>
			<input type="number" v-model="refernum" @input="changeInput2" placeholder="请输入数量">
		</view> -->
		<!-- <view class="s_href" @click="$navTo('/pages/user/transferList')">划拨明细></view> -->
		<view class="totalBtn" v-show="member.pmember.nickname" style="position: static;" @click="submit">确认划拨</view>
		<!-- 划拨明细 -->
		<view class="s_wp">
			<view class="q_tit">划拨明细</view>
			<view class="list" v-if="list.length>0">
				<view class="item" v-for="(item,index) in list" :key="item.id" @click="$navTo('./transferListDetail?pmid='+item.mid)">
					<view class="info">
						<view class="tit clamp">{{item.nickname}}</view>
						<view class="type">总划拨店铺：{{item.tsupnum}}</view>
						<view class="type">现有店铺：{{item.supnum}}</view>
						<!-- <view class="type">现有团长：{{item.refernum}}</view> -->
						<view class="name">划拨时间：{{item.createtime}}</view>
					</view>
					<view class="btn">划拨明细</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
				<text v-show="!ismore">到底了~</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pmid: '',
				mid: '',
				member: [],
				supnum: '',
				refernum:'',
				list: [],
				isloading: false,
				ismore: false,
				page: 0,
			}
		},
		onLoad(options) {
			this.getlist();
		},
		onReachBottom(){
			this.getlist();
		},
		methods: {
			getlist() {
				this.page++;
				this.isloading = true;
				this.$axios('salecenter/lists', 'POST', 'member',{
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			// 只能输入整数
			changeInput(e){
				let value = e.detail.value;
				if (value.indexOf('.')!=-1) {
				    value = value.substring(0, value.length - 1)
				}
				this.$nextTick(function() {
					this.supnum = value;
				})
			},
			// 只能输入整数
			changeInput2(e){
				let value = e.detail.value;
				if (value.indexOf('.')!=-1) {
				    value = value.substring(0, value.length - 1)
				}
				this.$nextTick(function() {
					this.refernum = value;
				})
			},
			queryMember(){
				// if(!this.pmid||!this.mid) return this.$api.msg('请输入运营中心ID和会员ID');
				if(!this.mid) return this.$api.msg('请输入会员ID');
				this.member = [];
				this.$axios('salecenter/search','POST','member',{
					// pmid: this.pmid,
					mid: this.mid
				}).then(res=>{
					if(res.data.code == 200){
						this.member = res.data.data;
					}
				})
			},
			submit(){
				if(this.member.member.nickname){
					if(!this.supnum) return this.$api.msg('请输入店铺数量');
					uni.showModal({
						title: '提示',
						content: '确认要划拨吗？',
						success: res=> {
							if (res.confirm) {
								this.$axios('salecenter/submitSale','POST','member',{
									pmid: this.pmid,
									mid: this.mid,
									supnum: this.supnum,
									// refernum: this.refernum
								}).then(res=>{
									if(res.data.code == 200){
										this.$api.msg(res.data.data);
										this.member = [];
										this.mid = '';
										this.page = 0;
										this.list = [];
										this.getlist();
									}
								})
							}
						}
					});
				}else{
					return this.$api.msg('请先查询');
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #FBF8FE;
	}
	.wp{
		padding: 20rpx;
		padding-bottom: 100rpx;
	}
	.s_input{
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		align-items: center;
		padding: 0 30rpx;
		input{
			flex: 1;
		}
		.s_query{
			width: 104rpx;
			line-height: 54rpx;
			background: #8615E1;
			border-radius: 27rpx;
			color: #FFFFFF;
			font-weight: 600;
			text-align: center;
		}
	}
	.q_tit{
		text-align: center;
		color: #999999;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		&::before{
			display: block;
			width: 50rpx;
			height: 1rpx;
			background: #eee;
			content: '';
			margin-right: 20rpx;
		}
		&::after{
			display: block;
			width: 50rpx;
			height: 1rpx;
			background: #eee;
			content: '';
			margin-left: 20rpx;
		}
	}
	.query_result{
		
		.q_content{
			padding: 10rpx 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.q_info{
				flex: 1;
				line-height: 50rpx;
			}
			image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}	
		}
	}
	.s_tip{
		margin-bottom: 20rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #8615E1;
		justify-content: center;
		height: 80rpx;
	}
	.s_href{
		color: #8615E1;
	    font-size: 30rpx;
	    font-weight: 600;
		text-align: right;
	    margin-top: 30rpx;
	}
	.s_wp{
		margin-top: 20rpx;
	}
	.list{
		.item{
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
				image{
					width: 144rpx;
					height: 144rpx;
					border-radius: 12rpx;
				}
				.info{
					// width: calc(100% - 254rpx);
					width: 100%;
					// padding-left: 20rpx;
					font-size: 26rpx;
					line-height: 1.8;
					.tit{
						font-size: 30rpx;
						color: #333333;
						font-weight: 600;
					}
					.type{
						color: #8615E1;
					}
					.name{
						color: #999999;
					}
				}
				.btn{
					width: 200rpx;
					height: 60rpx;
					background: #F0E1FF;
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 26rpx;
					color: #8615E1;
				}
		}
	}
	
</style>
